<!--
 * 选项卡组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 等分布局 -->
        <app-demo-module title="等分布局" desc="此模式下无法滚动">
            <pure-tabs class="tabs" :list="tabs" :current="current" @change="onTabsChange" vertical equal> </pure-tabs>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 标签列表
    const tabs = ref([
        { label: "衣服", value: "clothes" },
        { label: "裤子", value: "pants" },
        { label: "鞋子", value: "shoes" },
        { label: "帽子", value: "hats" },
        { label: "包", value: "bags" },
        { label: "钱包", value: "wallets" },
    ]);

    // 选中项的值
    const current = ref(0);

    // 切换事件
    function onTabsChange(index, item) {
        current.value = index;
    }
</script>

<style scoped lang="scss">
    .tabs {
        background: #f8f8f8;
        height: 350px;
    }
</style>
